<!DOCTYPE html>{% if mode != "playground" -%}
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
{% endif -%}
<!-- [START maps_{{tag}}] -->
<html {% if rtl == "true" %}dir="rtl"{% endif -%}>
  <head>
  <title>{{ title }}</title>
  {% block external -%}{% endblock -%}
  {% if mode == "playground" %}
    <!-- playground-hide -->
    <script>
      const process = {env: {}}
      process.env.GOOGLE_MAPS_API_KEY = "{{GOOGLE_MAPS_API_KEY}}";
    </script>
    <!-- playground-hide-end -->
  {% endif -%}
  {% block resources %}
  {% if mode == "jsfiddle" -%}
    <!-- jsFiddle will insert css and js -->
  {% elif mode == "app" %}
    <link rel="stylesheet" type="text/css" href="./style.css">
    <script type="module" src="./index.{% if tsx %}tsx{% else %}ts{% endif %}"></script>
  {% else %}    
    <link rel="stylesheet" type="text/css" href="./style.css">
    <script type="module" src="./index.js"></script>
  {% endif -%}
  {% endblock %}
  </head>
  <body>
  {% block html %}{% endblock %}
  {% block api %}
    {% if dynamic_import == "true" %}
      <!-- prettier-ignore -->
      <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "{{GOOGLE_MAPS_API_KEY}}"{% if libraries|length %}, libraries: {{ libraries }}{% endif %}{% if version|length %}, v: "{{ version }}"{% endif %}{% if language|length %}, language: "{{ language }}"{% endif %}{% if region|length %}, region: "{{ region }}"{% endif %}{% if solutionChannel|length %}, solutionChannel: "{{ solutionChannel }}"{% endif %}{% if authReferrerPolicy|length %}, authReferrerPolicy: "{{ authReferrerPolicy }}"{% endif %}});</script>
    {% else %}
      <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
      <script 
        src="https://maps.googleapis.com/maps/api/js?key={{GOOGLE_MAPS_API_KEY}}{% if callback %}&callback={{ callback }}{% endif %}{% if libraries|length %}&libraries={{ libraries }}{% endif %}&v={{ version }}{% if language %}&language={{ language }}{% endif %}{% if region %}&region={{ region }}{% endif %}" defer></script>
    {% endif -%}
  {% endblock %}   
  </body>
</html>
<!-- [END maps_{{tag}}] -->
